<template>
  <div class="personal">
    <TopSubfield></TopSubfield>
    <el-row>
      <el-col :span="4">1</el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <ul>
            <li
              class="profile-sidebar-section nextitem"
              v-for="item in qurearr"
              :key="item.id"
              @click="handitem(item.id)"
            >
              <router-link :to="{path:item.url, query:{childvalue:item.id}}">
                <i :class="itemval==item.id?'itemtitle actitem':'itemtitle'">{{item.name}}</i>
              </router-link>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="child">
          <router-view></router-view>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <Footer/>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import Footer from "@/components/bottom/footer";
export default {
  name: "personal",
  data() {
    return {
      islogin: false,
      itemval: 1,
      selectedId: "1",
      childvalue: 0,
      qurearr: [
        {
          name: "个人中心",
          url: "/Personal/Myprofile",
          id: 1
        },
        {
          name: "我的订单",
          url: "/Personal/Orderlist",
          id: 2
        },
        {
          name: "我的券包",
          url: "/Personal/Ticketlist",
          id: 3
        },
        {
          name: "兑换记录",
          url: "/Personal/Exchange",
          id: 4
        },
        {
          name: "我的收藏",
          url: "/Personal/Collection",
          id: 5
        },
        {
          name: "我的钱包",
          url: "/Personal/Mywallet",
          id: 6
        }
      ]
    };
  },
  watch: {
    token: function() {
      if (this.token) {
        this.islogin = true;
      } else {
        this.islogin = false;
      }
      this.init();
    }
  },
  components: {
    TopSubfield,
    Footer
  },
  methods: {
    //初始化
    init() {
      if (this.token) {
        this.islogin = true;
      } else {
        this.islogin = false;
        this.openlogin();
      }
    },
    //选择某一个tab
    handitem(val) {
      this.itemval = val;
    },
    //提示去登录
    openlogin() {
      this.$confirm("查看操作个人中须先登录，是否去登录?", "提示", {
        confirmButtonText: "登录",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          sessionStorage.setItem("oldhref", location.href);
          //跳转去登录页面登录，然后返回
          this.$router.push("./login");
        })
        .catch(() => {
           this.$router.push("./");
        });
    }
  },
  computed: {
    ...mapState(["token"])
  },
  created() {
    this.init();
  }
};
</script>
<style lang="less" scoped>
.personal {
  width: 100%;
  background: #ebeef5;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      .child {
        //   background: #fff;
      }
      .bg-purple {
        padding-top: 10px;
        height: 885px;
        background: #ebeef5;
        color: #666;
        .profile-sidebar-section {
          margin-bottom: 30px;
          .itemtitle {
            font-size: 22x;
            font-weight: 700;
            margin-bottom: 10px;
            display: block;
          }
          .itemsli {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
          }
        }
        .nextitem {
          cursor: pointer;
        }
        .actitem {
          color: #409eff;
        }
        i {
          font-size: 18px;
        }
      }
      .bg-purple-light {
        padding-top: 10px;
        background: #f2f6fc;
        height: 885px;
      }
    }
  }
}
</style>
